<template>
  <div>
    <!-- top -->
    <div class="title">
      <el-breadcrumb>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- cont -->
    <div class="bottoms">
      <div class="bottms_cont">
        <!-- 下单 -->
        <div class="bottom_items">
          <div class="items_left">下单多少分钟后</div>
          <!-- input -->
          <div class="items_input">
            <el-input v-model="input" placeholder="15"></el-input>
          </div>
          <!-- button点击 -->
          <div class="item_fenzhong">分钟</div>
        </div>
      </div>
    </div>
    <!-- 提示 -->
    <div class="lint_message">订单未付款，n分钟后自动关闭，空为15分钟，最低为3分钟</div>
    <!-- 提交按钮 -->
    <div class="buttons">
      <el-button type="primary">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
    }
  },
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 10px;
}
.bottoms {
  width: 100%;
  height: 60px;
  padding: 20px 30px 0 30px;
  box-sizing: border-box;
  .bottms_cont {
    width: 100%;
    height: 100%;
    .bottom_items {
      width: 100%;
      height: 40px;
      display: flex;
      .items_left {
        width: 200px;
        height: 100%;
        line-height: 40px;
        text-indent: 90px;
      }
      //input
      .items_input {
        width: 200px;
        height: 100%;
      }
      //分钟
      .item_fenzhong{
        width: 40px;
        height: 38px;
        text-align: center;
        line-height: 40px;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd;
      }
    }
  }
}
.lint_message{
  width: 100%;
  height: 30px;
  text-indent: 230px;
  line-height: 30px;
  color: red;
  margin-bottom: 40px;
}

//buttons
.buttons{
  width: 100%;
  height: 30px;
  padding:  0 0 0 300px;
}
</style>
